import React, { Component } from 'react';
import {
  Text,
  View,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  Image,
} from 'react-native';
import { px2dp } from 'bee/utils/px2dp';
import { colors, sizes } from 'bee/themes';
import { Icon, Names } from 'bee/components/Icon';
import { request } from 'bee/utils/request';

import OrderCategory from './OrderCategory';
import MyItem from './MyItem';
import OtherOption from './OtherOption';

// @flow
type Props = {
  navigation: Object,
};

export default class MyAccount extends Component<Props> {
  constructor() {
    super();

    this.state = {
      username: '',
      code: '',
      portrait: '',
    };
  }

  componentDidMount() {
    request('/myAccount').then(data => {
      const { body } = data;
      console.log(data);
      this.setState({
        username: body.username,
        code: body.code,
        portrait: body.portrait,
      });
    });
  }

  render() {
    return (
      <ScrollView>
        {/* 顶部栏 */}
        <View style={styles.topbox}>
          <Text style={styles.navigation} />
          <Text style={styles.topBoxInnerText}>我的</Text>
        </View>

        {/* 个人区 */}
        <TouchableOpacity
          onPress={() =>
            this.props.navigation.navigate('MyInformation', {
              username: this.state.username,
              code: this.state.code,
              portrait: this.state.portrait,
            })
          }
          style={styles.personalInfoOuterContainer}
        >
          <View style={styles.personalInfo}>
            <View style={styles.personalInfoLeftPart}>
              {/* 头像 */}
              <Image
                style={styles.headPortrait}
                source={{ uri: this.state.portrait }}
              />

              {/* 姓名+职级+营销编码 */}
              <View style={styles.salemanOutline}>
                <Text style={styles.oulineText}>{this.state.username}</Text>
                <Text style={styles.outlineText}>
                  营销编码：
                  {this.state.code}
                </Text>
              </View>
            </View>

            {/* 二维码 */}
            <View style={styles.moreInfo}>
              <Icon
                name={Names.erweima}
                color={colors['1103']}
                size={sizes.f4}
                style={{ marginRight: px2dp(15) }}
              />
              <Icon
                name={Names.gengduofuben}
                color={colors['1103']}
                size={sizes.f4}
              />
            </View>
          </View>
        </TouchableOpacity>
        {/* 订单详情 */}
        <View style={styles.ordersContainer}>
          <View style={styles.textContainer}>
            <Text style={styles.aimToAllOrders}>查看全部订单</Text>
            <View style={styles.moreOrdersIcon}>
              <Icon
                name={Names.gengduofuben}
                color={colors['1103']}
                size={sizes.f1}
              />
            </View>
          </View>
          <View style={styles.orderChoiceContainer}>
            <OrderCategory
              OrderCategoryName="暂存单"
              iconName={Names.baodan}
              onPress={() => {
                this.props.navigation.navigate('MakePlan');
              }}
            />
            <OrderCategory
              iconName={Names.daizhifu}
              OrderCategoryName="待支付"
            />
            <OrderCategory
              iconName={Names.yizhifu}
              OrderCategoryName="已支付"
            />
            <OrderCategory
              iconName={Names.wentidan}
              OrderCategoryName="问题单"
            />
          </View>
        </View>

        {/* 我的XX */}
        <View style={[styles.itemContainer, styles.blank]}>
          <MyItem
            itemName="我的业绩"
            iconName={Names.wodeyeji}
            iconColor="#FF6608"
          />
          <MyItem
            itemName="我的团队"
            iconName={Names.tuandui}
            iconColor="#46B346"
          />
          <MyItem
            itemName="我的佣金"
            iconName={Names.yongjin}
            iconColor="#F1DA3F"
          />
          <MyItem
            itemName="我的学习"
            iconName={Names.xuexi}
            iconColor={colors['1001']}
          />
        </View>

        {/* 其他 */}
        <View>
          <OtherOption
            optionName="邀请好友"
            iconColor="#FF6608"
            iconName={Names.yaoqinghaoyou}
          />
          <OtherOption
            optionName="我的收藏"
            iconColor="#F1DA3F"
            iconName={Names.shoucang}
          />
          <OtherOption
            optionName="客服中心"
            iconColor={colors['1001']}
            iconName={Names.kefu}
          />
          <OtherOption
            optionName="系统设置"
            iconColor={colors['1103']}
            iconName={Names.shezhi}
          />
        </View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  navigation: {
    height: px2dp(28 + 6),
  },
  topbox: {
    height: px2dp(128),
    backgroundColor: colors[1001],
    alignItems: 'center',
    justifyContent: 'center',
  },
  topBoxInnerText: {
    fontSize: sizes.f4,
    fontWeight: 'normal',
    color: colors.white,
  },
  personalInfoOuterContainer: {
    backgroundColor: colors.white,
  },
  personalInfo: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    height: px2dp(159),
    marginHorizontal: px2dp(30),
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderColor: colors['1104'],
  },
  personalInfoLeftPart: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  headPortrait: {
    height: px2dp(101),
    width: px2dp(102),
  },
  salemanOutline: {
    paddingVertical: px2dp(19),
    paddingHorizontal: px2dp(21),
    width: px2dp(502),
  },
  outlineText: {
    paddingVertical: px2dp(5),
  },
  moreInfo: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  QRCode: {
    height: px2dp(38),
    width: px2dp(38),
    marginRight: px2dp(28),
    backgroundColor: colors[1002],
  },
  ordersContainer: {
    height: px2dp(200),
    borderBottomWidth: px2dp(1),
    borderColor: colors['1104'],
    backgroundColor: colors.white,
  },
  textContainer: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  aimToAllOrders: {
    color: colors['1102'],
    fontSize: px2dp(22),
    paddingVertical: px2dp(24),
  },
  orderChoiceContainer: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
  },
  blank: {
    marginVertical: px2dp(30),
  },
  itemContainer: {
    height: px2dp(320),
    width: px2dp(750),
    flexDirection: 'row',
    flexWrap: 'wrap',
    backgroundColor: colors.white,
  },
  moreOrdersIcon: {
    paddingRight: px2dp(30),
    paddingVertical: px2dp(24),
    paddingLeft: px2dp(2),
  },
});
